<template>
  <div style="margin: 10px 0;">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" class="mgb20" style="height: 200px;">
          <div class="user-info">
            <img src="../assets/images/img.jpg" class="user-avator" alt/>
            <div class="user-info-cont">
              <div class="user-info-name">您好，{{ participantName }}</div>
              <div>{{ category }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card shadow="hover" class="mgb20" style="height: 200px;">
          <el-form ref="ruleForm" :rules="rules" label-width="200px" class="demo-ruleForm" :size="formSize">
            <el-form-item label="新密码" prop="password">
              <el-input v-model="password" type="password" placeholder="新密码" show-password/>
            </el-form-item>
            <el-form-item label="确认密码" prop="againPassword">
              <el-input v-model="againPassword" type="password" placeholder="确认密码" show-password/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit()">提交</el-button>
            </el-form-item>

          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-card shadow="hover" class="mgb20" style="height: 250px;">
      <span style="font-weight:bold">科研成果</span>
      <el-divider/>
      <el-row>
        <template v-for="(item,index) in teachingReward">
          <el-col :span="4">
            <p class="element-text"  v-text="item.name" v-if="index < 6"/>
            <p class="element-text" style="margin-top: 20px" v-text="item.name" v-else/>
            <div style="margin-top: 5px">
              <span class="element-number">{{item.num}}</span>
              <span class="element-number" style="margin-left: 5px" v-text="item.type"/>
            </div>
          </el-col>
        </template>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  computed,
  watch
} from 'vue';
import request from '@/utils/request'
import {
  ElMessage,
} from 'element-plus'

export default {
  name: '',
  created() {
    this.load()
    this.loadNumber();
  },
  setup() {
    const participantName = ref('');
    const category = ref('');
    const password = ref('');
    const againPassword = ref('');

    function load() {
      request({
        url: '/accounts/getSimpleAccount',
        headers: {
          isToken: true
        },
        timeout: 20000,
        method: 'get',
        params: {}
      }).then((res) => {
        this.participantName = res.data.user.participantName
        this.category = res.data.user.category
      })
    };

    function submit() {
      if (this.password == '' || this.againPassword == '') {
        ElMessage({
          showClose: true,
          message: '请按条件输入新密码',
          center: true,
          type: 'error'
        })
      } else if (this.password != this.againPassword) {
        ElMessage({
          showClose: true,
          message: '确认密码与新密码不一致！',
          center: true,
          type: 'error'
        })
      } else {
        request({
          url: '/accounts/password',
          headers: {
            isToken: true
          },
          timeout: 20000,
          method: 'put',
          data: this.password
        }).then((res) => {
          ElMessage({
            showClose: true,
            message: '密码已修改',
            center: true,
            type: 'success'
          })
          this.password = ''
          this.againPassword = ''
        })
      }
    }

    return {
      participantName,
      category,
      password,
      againPassword,
      load,
      submit,
    }
  },
  data() {
    //不知道的错误Value为undefined
    var validatePass = (rule, value, callback) => {
      value = this.password
      if (value == '' || value == null) {
        callback(new Error('请输入密码'));
      } else {
        if (this.password != '') {
          this.$refs.ruleForm.validateField('password');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      value = this.againPassword
      if (value == '' || value == null) {
        callback(new Error('请再次输入密码'));
      } else if (value != this.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      rules: {
        password: {
          required: true,
          validator: validatePass,
          trigger: 'blur'
        },
        againPassword: {
          required: true,
          validator: validatePass2,
          trigger: 'blur'
        },
      },
      teachingReward: [{
        name: "学术论文",
        num: 0,
        type: "篇",
      }, {
        name: "纵向项目",
        num: 0,
        type: "个",
      }, {
        name: "横向项目",
        num: 0,
        type: "个",
      }, {
        name: "专利",
        num: 0,
        type: "个",
      }, {
        name: "软件著述权",
        num: 0,
        type: "项",
      }, {
        name: "科研成果奖励",
        num: 0,
        type: "项",
      }, {
        name: "教学成果奖励",
        num: 0,
        type: "项",
      }, {
        name: "出版刊物",
        num: 0,
        type: "篇",
      }, {
        name: "学科竞赛",
        num: 0,
        type: "个",
      }, {
        name: "参加会议",
        num: 0,
        type: "个",
      }, {
        name: "成果转化",
        num: 0,
        type: "项",
      }]
    }
  },
  methods: {
    loadNumber() {
      request({
        url: '/all/number',
        headers: {
          isToken: true
        },
        timeout: 20000,
        method: 'get',
      }).then((res) => {
        for (let i = 0; i < 11; i++) {
          this.teachingReward[i].num = res.data.items[i];
        }
        console.log(this.teachingReward);
      })
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-input {
  width: 35%;
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.mgb20 {
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.element-text {
  color: #8c8c8c;
}

.element-number {
  font-weight: bold;
  font-size: 25px;
}

</style>
